<template>
  <transition
      @enter="enter"
      @leave="leave"
      :css="false"
  >
    <div class="listPlayer" v-show="this.isListPlayer" @click.stop="hidden">
      <div class="player-wrapper">
        <div class="player-top">
          <div class="top-left">
            <div class="mode loop" @click.stop="mode" ref="mode"></div>
            <p ref="modeText">顺序播放</p>
          </div>
          <div class="top-right">
            <div class="del" @click="DelSong()"></div>
          </div>
        </div>
        <div class="player-middle">
          <ScrollView ref="scrollView">
            <ul ref="play">
              <li :class="currentIndex === index ? ['item','active'] : 'item'" v-for="(value,index) in songs" :key="value.id" @click.stop="selectMusic(index)">
                <div class="item-left">
                  <span class="item-index">{{index + 1}}</span>
                  <p>
                    <span>{{ value.name }}</span>
                    <span>{{ value.singer }}</span>
                  </p>
                </div>
                <div class="item-right">
                  <div class="item-favorite" @click.stop="favorite(value)"
                       :class="{'active' : isFavorite(value)}"></div>
                  <div class="item-del" @click.stop="DelSong(index)"></div>
                </div>
              </li>
            </ul>
          </ScrollView>
        </div>
        <div class="player-bottom">
          <p @click.stop="hidden">点击关闭</p>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import ScrollView from "../../components/ScrollView";
import Velocity from "velocity-animate";
import 'velocity-animate/velocity.ui'
import {mapActions, mapGetters} from "vuex"
import modeType from "@/store/modeType";

export default {
  name: "ListPlayer",
  components: {
    ScrollView,
  },
  data() {
    return {}
  },
  methods: {
    ...mapActions([
      'setIsPlaying',
      "setModeType",
      'setListPlayer',
      'setDelSong',
      'setCurrentIndex',
      'setFavoriteSong',
       'setFullScreen'
    ]),
    hidden() {
      this.setListPlayer(false)
    },
    enter(el, done) {
      Velocity(el, 'transition.slideUpIn', {duration: 300}, () => done())
    },
    leave(el, done) {
      Velocity(el, 'transition.slideUpOut', {duration: 300}, () => done())
    },
    mode() {
      if (this.modeType === modeType.loop) {
        this.setModeType(modeType.one)
      } else if (this.modeType === modeType.one) {
        this.setModeType(modeType.random)
      } else if (this.modeType === modeType.random) {
        this.setModeType(modeType.loop)
      }
    },
    DelSong(index) {
      this.setDelSong(index)
      this.$refs.scrollView.refresh()
    },
    selectMusic(index) {
      this.setCurrentIndex(index)
      this.setIsPlaying(true)
      this.setFullScreen(true)
    },
    favorite(value) {
      this.setFavoriteSong(value)
    },
    isFavorite(song) {
      let result = this.favoriteList.find(function (currentValue) {
        return currentValue.id === song.id
      })
      return result !== undefined
    },
  },
  computed: {
    ...mapGetters([
      'modeType',
      'isListPlayer',
      'songs',
      'currentIndex',
      'favoriteList'
    ])
  },
  watch: {
    modeType(newValue, oldValue) {
      if (newValue === modeType.loop) {
        this.$refs.mode.classList.remove('random');
        this.$refs.mode.classList.add('loop');
        this.$refs.modeText.innerHTML = "顺序播放"
      } else if (newValue === modeType.one) {
        this.$refs.mode.classList.remove('loop');
        this.$refs.mode.classList.add('one');
        this.$refs.modeText.innerHTML = "单曲循环"
      } else if (newValue === modeType.random) {
        this.$refs.mode.classList.remove('one');
        this.$refs.mode.classList.add('random');
        this.$refs.modeText.innerHTML = "随机播放"
      }
    },
    isListPlayer(newValue, oldValue) {
      if (newValue) {
        this.$refs.scrollView.refresh()
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/mixin";
@import "../../assets/css/variable";

.listPlayer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.8);
  overflow: hidden;

  .player-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    @include bg_sub_color();
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    .player-top {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;


      .top-left {
        display: flex;
        align-items: center;

        .mode {
          width: 46px;
          height: 46px;
          margin: 0 20px;

          &.loop {
            @include bg_img("../../assets/images/small_loop");
          }

          &.one {
            @include bg_img("../../assets/images/small_one");
          }

          &.random {
            @include bg_img("../../assets/images/small_shuffle");
          }
        }

        p {
          @include font_size($font_medium_s);
          @include font_color();
        }
      }

      .top-right {
        margin: 0 20px;

        .del {
          width: 70px;
          height: 70px;
          @include bg_img("../../assets/images/small_del")
        }
      }
    }
    .player-middle {
      width: 100%;
      height: 700px;
      overflow: hidden;
      padding-bottom: 100px;
      .item {
        height: 100px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.active{
          .item-left{
            p{
              @include font_active_color();
            }
            .item-index{
              @include font_active_color();
            }
          }
        }

        .item-left, .item-right {
          display: flex;
          align-items: center;
        }

        .item-left {
          padding-left: 20px;
          .item-index{
            width: 50px;
            margin-right: 20px;
            @include font_size($font_large);
            @include font_color();
            text-align: center;
          }

          p {
            display: flex;
            flex-direction: column;
            @include font-color();
            @include font_size($font_large);
            @include no-wrap();
            width: 400px;

            span:nth-child(2){
              @include font_size($font_medium_s);
            }
          }
        }

        .item-right {
          div {
            width: 46px;
            height: 46px;
          }

          .item-favorite {
            @include bg_img("../../assets/images/small_un_favorite");

            &.active {
              @include bg_img("../../assets/images/small_favorite");
            }
          }

          .item-del {
            @include bg_img("../../assets/images/small_close");
            margin: 0 30px;

          }
        }

      }
    }

    .player-bottom {
      width: 100%;
      height: 100px;
      line-height: 100px;
      @include bg_color();
      position: absolute;
      bottom: 0;

      p {
        text-align: center;
        @include font_size($font_medium);
        color: white;
      }
    }
  }
}


</style>
